<template>
    <view class="found">
        <view class="found_title">标题设置</view>
        <view class="title_mian">
            <view class="title_li">
                <view class="li"><text>*</text>发布单位</view>
                <view class="inputs"><u-input v-model="form.unit" :type="text" :border="border" placeholder="请输入发布单位" />
                </view>
            </view>
            <view class="title_li">
                <view class="li"><text>*</text>{{ type == 1 ? "打卡标题" : "问卷标题" }}</view>
                <view class="inputs"><u-input maxlength="30" v-model="form.title" type="textarea" :border="border"
                        placeholder="请输入标题" :height="height" :auto-height="autoHeight" /></view>
            </view>
            <view class="title_li">
                <view class="li"><text>*</text>副标题</view>
                <view class="inputs"><u-input v-model="form.subtitle" type="textarea" :border="border" placeholder="请输入副标题"
                        :height="height" :auto-height="autoHeight" /></view>
            </view>
        </view>
        <view class="found_title">题目设置</view>
        <view class="topic">
            <view class="addfound_mian" v-for="(itme, index) in addforms" :key="index">
                <view class="addfound_title">
                    <text class="textindex">{{ index + 1 }}、</text>
                    <u-input style="flex: 1;" placeholder="点击此处设置标题" v-model="itme.value" type="text" />
                    <text class="typeindex">{{ itme.title }}</text>
                </view>
                <view class="selectbox" v-if="itme.type == 'radio'">
                    <view class="selectboxlist" v-for="(val, i) in itme.ext" :key="i">
                        <view class="iconindex">{{ i + 1 }}</view>
                        <view class="iconiright">
                            <view class="inpust"><input type="text" :placeholder="'选项' + (i + 1)" v-model="itme.ext[i]" />
                            </view>
                            <image @click="delcheck(index, i)" class="dels"
                                src="https://txr001.zthj.net/voucher_img/foundpo_del.png"></image>
                        </view>
                    </view>
                    <view class="selectbox_title" @click="addson(index)">添加选项</view>
                </view>
                <view class="selectbox" v-if="itme.type == 'checkbox'">
                    <view class="selectboxlist" v-for="(val, i) in itme.ext" :key="i">
                        <view class="iconindex">{{ i + 1 }}</view>
                        <view class="iconiright">
                            <view class="inpust"><input type="text" :placeholder="'选项' + (i + 1)" v-model="itme.ext[i]" />
                            </view>
                            <image @click="delcheck(index, i)" class="dels"
                                src="https://txr001.zthj.net/voucher_img/foundpo_del.png"></image>
                        </view>
                    </view>
                    <view class="selectbox_title" @click="addson(index)">添加选项</view>
                </view>
                <view class="topic_bnts">
                    <view class="requireds" @click="requiredfns(index)">
                        <image
                            :src="itme.must_status == 1 ? 'https://txr001.zthj.net/voucher_img/check_ok.png' : 'https://txr001.zthj.net/voucher_img/check_no.png'">
                        </image>必填
                    </view>
                    <view class="requiredsright">
                        <view class="delbnt" @click="moveType(index, 'up')" v-if="index > 0">
                            <image src="https://txr001.zthj.net/voucher_img/fount.png"></image>上移
                        </view>
                        <view class="delbnt" @click="moveType(index, 'down')" v-if="index < addforms.length - 1">
                            <image src="https://txr001.zthj.net/voucher_img/founb.png"></image>下移
                        </view>
                        <view class="delbnt" @click="formslistDel(index)">
                            <image src="https://txr001.zthj.net/voucher_img/found_del.png"></image>删除
                        </view>
                    </view>

                </view>
            </view>
            <view class="addFound" @click="show = !show">
                <image src="https://txr001.zthj.net/voucher_img/addfound.png"></image><text>添加填写项</text>
            </view>
        </view>
        <view class="found_title">任务设置</view>
        <view class="quest" v-if="type == 1">
            <view class="quest_title">
                <view><text>*</text>参加时间</view>
                <view style="font-size: 26rpx;">全天</view>
            </view>
            <zxz-uni-datetime-picker :start="startDate" type="daterange" rangeSeparator="至" @change="attendchange">
                <view class="time_box">
                    <view class="kaishi" :class="{ 'kaishiok': form.start_time }">{{ form.start_time ? form.start_time :
                        "开始日期" }}
                    </view>
                    <image class="fanen" src="https://txr001.zthj.net/voucher_img/fanen.png"></image>
                    <view class="kaishi" :class="{ 'kaishiok': form.start_time }">{{ form.end_time ? form.end_time : "结束日期"
                    }}</view>
                    <image class="time" src="https://txr001.zthj.net/voucher_img/date_icon.png"></image>
                </view>
            </zxz-uni-datetime-picker>
            <view class="quest_title">
                <view><text>*</text>打卡时间段</view>
            </view>
            <view class="time_box" @click="showcalendar = true">
                <view class="kaishi" :class="{ 'kaishiok': form.dk_start_time }">{{ form.dk_start_time || '开始时间' }}</view>
                <image class="fanen" src="https://txr001.zthj.net/voucher_img/fanen.png"></image>
                <view class="kaishi" :class="{ 'kaishiok': form.dk_end_time }">{{ form.dk_end_time || '结束时间' }}</view>
                <image class="time" src="https://txr001.zthj.net/voucher_img/time_icon.png"></image>
            </view>
            <view class="switch_box">
                <view class="switch_left"><text>*</text>允许补卡</view>
                <u-switch v-model="form.can_bk" active-color="#07C160" inactive-color="#C7C7C7" size="50"></u-switch>
            </view>
            <view class="switch_box">
                <view class="switch_left"><text>*</text>允许授权他人打卡</view>
                <u-switch v-model="form.can_help" active-color="#07C160" inactive-color="#C7C7C7" size="50"></u-switch>
            </view>
        </view>
        <view class="quest" v-if="type == 2">
            <view class="quest_title">
                <view><text>*</text>截止时间</view>
            </view>
            <zxz-uni-datetime-picker :start="startDate" type="datetime" rangeSeparator="至" @change="change">
                <view class="time_box">
                    <view class="kaishi" :class="{ 'kaishiok': form.end_time }">{{ form.end_time || '截止时间' }}</view>
                    <image class="time" src="https://txr001.zthj.net/voucher_img/date_icon.png"></image>
                </view>
            </zxz-uni-datetime-picker>

        </view>
        <view class="found_bnt" @click="submit">创建</view>

        <u-popup v-model="show" mode="bottom" border-radius="24">
            <view class="addFoundPo">
                <view class="addFoundPo_title">添加填表项目 <image @click="show = false"
                        src="https://txr001.zthj.net/voucher_img/foundpo_del.png"></image>
                </view>
                <view class="addFoundPolist" v-for="(item, index) in useDiyDataNewList" :key="index">
                    <view class="polist_title">{{ item.title }}</view>
                    <view class="polist">
                        <view class="lis" @click="addformfn(vas)" v-for="(vas, i) in item.dataList" :key="i">
                            <image :src="vas.icon"></image>
                            <text>{{ vas.title }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>
        <u-popup v-model="showcalendar" mode="bottom" border-radius="24">
            <view>
                <smh-time-range :time="['12', '30', '0', '17', '30']" @confrim="confrim"
                    @cancel="showcalendar = false"></smh-time-range>
            </view>
        </u-popup>
    </view>
</template>

<script>
import diyFormData from "@/config/diy_form_data";
export default {
    components: {

    },
    data() {
        return {
            edit_id: 0,
            startDate: "",
            maxDate: "2022-02-04",
            range: ['2021-02-1', '2021-3-28'],
            showcalendar: false,
            show: false,
            form: {
                type: '1',
                title: "",
                unit: "",
                subtitle: "",
                start_time: "",
                end_time: "",
                dataList: [],
                can_bk: 0,
                can_help: 0,

                //打卡参数
                dk_start_time: '',
                dk_end_time: '',


            },
            selectDateType: "1",
            inputTypeform: {
                1: "单行填写框",
                2: "多行填写框",
                3: "数字填写框",
                4: "单选",
                5: "多选",
                6: "日期和时间",
                7: "定位",
                8: "上传图片",
                9: "上传视频",
                10: "上传文档"
            },
            //inputType 1=单行填写框 2=多行填写框 3=数字填写框 4=单选,5=多选,6=日期和时间 7=定位 8=图片 9=视频 10=文档
            addforms: [],
            border: true,
            height: 120,
            autoHeight: true,
            type: 1,
            useDiyDataNewList: [],
            status: false
        }
    },
    onLoad(res) {
        console.log(res)
        this.type = res.type
        this.form.type = res.type == 2 ? 1 : 2;
        this.edit_id = parseInt(res.edit_id || '0');

        let title = (this.edit_id > 0 ? '编辑' : '创建') + (res.type == 1 ? '空白打卡' : "空白问卷")
        uni.setNavigationBarTitle({
            title: title
        })
        this.startDate = this.getCurrent()
        this.useDiyDataNewList = diyFormData.useDiyDataNew;

        if (this.edit_id > 0) {
            this.loadEditInfo()
        }
    },
    methods: {
        async loadEditInfo() {
            let res = await this.$api.editStatisticsInfo({ s_id: this.edit_id });
            if (res.code == 1) {
                this.form = res.data.info
                this.addforms = [...res.data.info.dataList]
            }
        },
        getCurrent() {
            var dd = new Date();
            var y = dd.getFullYear();
            var m = this.addZero(dd.getMonth() + 1);//获取当前月份的日期
            var d = this.addZero(dd.getDate());
            var h = this.addZero(dd.getHours());//获得小时
            var mi = this.addZero(dd.getMinutes());//获得分钟
            let datas = y + "-" + m + "-" + d
            return datas
        },
        addZero(num) {
            if (parseInt(num) < 10) {
                num = "0" + num
            }
            return num
        },
        delcheck(index, i) {
            console.log(index, i)
            if (this.addforms[index].ext.length < 2) {
                uni.showToast({
                    title: "至少保留一个选项",
                    icon: "none"
                })
                return;
            }
            this.addforms[index].ext.splice(i, 1);
        },
        //提交
        async submit() {
            let that = this
            if (!this.verifyfn()) {
                return false;
            }
            this.form.dataList = this.addforms
            this.form.s_id = this.edit_id;
            this.form.can_help = this.form.can_help || this.form.can_help == 1 ? 1 : 0;
            this.form.can_bk = this.form.can_bk || this.form.can_bk == 1 ? 1 : 0;
            let res = await this.$api.addCreate(this.form)

            uni.showToast({ title: res.msg, icon: "none" })
            if (res.code !== 1) {
                return false
            }
            uni.navigateBack();
        },
        verifyfn() {
            this.form.title = this.form.title ? this.form.title.trim() : '';
            this.form.unit = this.form.unit ? this.form.unit.trim() : '';
            this.form.subtitle = this.form.subtitle ? this.form.subtitle.trim() : '';

            if (this.type == '1') {
                if (this.form.title == '') {
                    uni.showToast({ title: '请输入打卡标题', icon: "none" })
                    return false
                }
            } else {
                if (this.form.title == '') {
                    uni.showToast({ title: '请输入问卷标题', icon: "none" })
                    return false
                }
            }

            if (this.form.unit == '') {
                uni.showToast({ title: '请输入发布单位', icon: "none" })
                return false
            }

            if (this.form.subtitle == '') {
                uni.showToast({ title: '请输入副标题', icon: "none" })
                return false
            }

            if (!this.addforms.length) {
                uni.showToast({ title: '请添加填写项', icon: "none" })
                return false
            }

            if (!this.addforms[0].value) {
                uni.showToast({ title: '请输入填写项标题', icon: "none" })
                return false
            }

            if (this.type == '1') {
                if (this.form.end_time == '') {
                    uni.showToast({ title: '请选择参加时间', icon: "none" })
                    return false
                }
            } else {
                if (this.form.end_time == '') {
                    uni.showToast({ title: '请选择截至时间', icon: "none" })
                    return false
                }
            }

            return true;

            /* var bgimg = await this.$refs.add_sel_bg.getBgUrl();
            console.log(bgimg) */
            //var contentList = await this.$refs.add_sel_button.getContent();
            //console.log('contentList',contentList)



        },
        attendchange(e) {
            console.log(e)
            this.form.start_time = e[0]
            this.form.end_time = e[1]
        },
        confrim(e) {
            let t = e.time.split('-');
            this.form.dk_start_time = t[0];
            this.form.dk_end_time = t[1];
            this.cancel = false
            this.showcalendar = false
        },
        change(e) {
            this.form.end_time = e;
        },
        onDateSelectorSubmit() {

        },
        addformfn(row) {
            this.show = false
            let info = JSON.parse(JSON.stringify(row))
            this.addforms.push(info)
            console.log(this.addforms)
        },
        addson(index) {
            this.addforms[index].ext.push('');
        },
        requiredfns(index) {
            console.log(index)
            if (this.addforms[index].must_status == 1) {
                this.addforms[index].must_status = -1
            } else {
                this.addforms[index].must_status = 1
            }
            console.log(this.addforms[index].must_status)
            console.log(this.addforms[index])
            this.addforms = [...this.addforms]
        },
        //上移下移
        moveType(index, type) {
            console.log("这里没来有", type)
            //down下移 up上移
            if (type == 'down') {
                var nowInfo = this.addforms[index];
                var nextInfo = this.addforms[index + 1] ? this.addforms[index + 1] : {};
                if (!nextInfo) {
                    uni.showToast({
                        title: "已经是最后一个了",
                        icon: "none"
                    });
                    return false
                }
                this.addforms[index] = nextInfo;
                this.addforms[index + 1] = nowInfo;
            } else if (type == 'up') {
                var nowInfo = this.addforms[index];
                var upInfo = this.addforms[index - 1] ? this.addforms[index - 1] : {};
                if (!upInfo) {
                    uni.showToast({
                        title: "已经是第一个了",
                        icon: "none"
                    });
                    return false
                }
                this.addforms[index] = upInfo;
                this.addforms[index - 1] = nowInfo;
            }
            this.addforms = [...this.addforms]
        },
        //删除
        formslistDel(index) {
            console.log(index)
            this.addforms.splice(index, 1);
        }

    },
}
</script>

<style lang="less" scoped>
.found {
    padding: 40rpx 32rpx;

    .found_title {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #010101;
        line-height: 28rpx;
        margin-bottom: 24rpx;
    }

    .title_mian {
        background: #FFFFFF;
        border-radius: 48rpx 48rpx 48rpx 48rpx;
        padding: 32rpx;
        padding-bottom: 48rpx;
        margin-bottom: 48rpx;

        .title_li {
            margin-bottom: 48rpx;

            &:last-child {
                margin-bottom: 0;
            }

            .li {
                font-size: 28rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                color: #010101;
                line-height: 50rpx;
                margin-bottom: 16rpx;

                text {
                    font-size: 28rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    color: #EC6969;
                }
            }
        }
    }

    .topic {
        background: #FFFFFF;
        border-radius: 48rpx 48rpx 48rpx 48rpx;
        padding: 48rpx 32rpx;
        margin-bottom: 48rpx;

        .addfound_mian {
            padding: 24rpx;
            background: #F5F5F5;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            margin-bottom: 48rpx;

            .addfound_title {
                font-size: 28rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                color: #010101;
                line-height: 33rpx;
                padding-bottom: 24rpx;
                border-bottom: 2rpx solid #D9D9D9;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .textindex {}

                .typeindex {
                    font-size: 24rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    color: #CDCDCD;
                    line-height: 33rpx;
                }
            }

            .selectbox {
                .selectboxlist {
                    display: flex;
                    align-items: center;

                    .iconindex {
                        width: 32rpx;
                        background: #D9D9D9;
                        border-radius: 0rpx 0rpx 0rpx 0rpx;
                        opacity: 1;
                        text-align: center;
                        line-height: 32rpx;
                        font-size: 22rpx;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        border-radius: 100%;
                        color: #767879;
                        margin-right: 16rpx;
                    }

                    .iconiright {
                        padding: 22rpx 0;
                        border-bottom: 2rpx solid #D9D9D9;
                        flex: 1;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .inpust {
                            flex: 1;

                            input {
                                width: 100%;
                                height: 100%;
                                font-size: 24rpx;
                                font-family: PingFang SC, PingFang SC;
                                font-weight: 400;
                                color: #010101;
                            }
                        }

                        .dels {
                            width: 28rpx;
                            height: 28rpx;
                            margin-left: 40rpx;
                        }
                    }
                }

                .selectbox_title {
                    padding: 22rpx;
                    font-size: 22rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    color: #24458E;
                    line-height: 26rpx;
                }
            }

            .topic_bnts {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-top: 28rpx;

                .requireds {
                    display: flex;
                    align-items: center;
                    font-size: 24rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    color: #767879;
                    line-height: 28rpx;

                    image {
                        width: 28rpx;
                        height: 28rpx;
                        display: inline-block;
                        margin-right: 8rpx;
                    }
                }

                .requiredsright {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;

                    .delbnt {
                        display: flex;
                        align-items: center;
                        font-size: 24rpx;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        color: #767879;
                        line-height: 28rpx;
                        margin-left: 32rpx;

                        image {
                            width: 28rpx;
                            height: 28rpx;
                            display: inline-block;
                            margin-right: 8rpx;
                        }
                    }
                }

            }
        }

        .addFound {
            height: 88rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            border: 2rpx dashed #D9D9D9;

            image {
                width: 40rpx;
                height: 40rpx;
                display: inline-block;
                margin-right: 8rpx;
            }

            text {
                font-size: 28rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                color: #010101;
                line-height: 40rpx;
            }
        }
    }

    .quest {
        padding: 32rpx;
        background: #FFFFFF;
        border-radius: 48rpx 48rpx 48rpx 48rpx;

        .quest_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16rpx;

            &:first-child {
                font-size: 28rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                color: #010101;
                line-height: 50rpx;
            }

            &:last-child {
                font-size: 28rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                color: #010101;
                line-height: 50rpx;
            }

            text {
                color: #EC6969;
            }
        }

        .time_box {
            margin-bottom: 48rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            opacity: 1;
            border: 2rpx solid #D9D9D9;
            padding: 20rpx 24rpx;

            .kaishi {
                flex: 1;
                text-align: center;
                font-size: 28rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                color: #D5D8D9;
            }

            .kaishiok {
                color: #010101;
            }

            .fanen {
                width: 48rpx;
                height: 48rpx;
                display: block;
            }

            .time {
                width: 32rpx;
                height: 32rpx;
                display: block;
            }

        }

        .switch_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 48rpx;

            .switch_left {
                font-size: 28rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                color: #010101;
                line-height: 50rpx;

                text {
                    color: #EC6969;
                }
            }
        }
    }

    .found_bnt {
        width: 454rpx;
        text-align: center;
        line-height: 88rpx;
        height: 88rpx;
        background: #24458E;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        margin: 0 auto;
        margin-top: 64rpx;
        text-align: center;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
    }
}

.addFoundPo {
    padding: 48rpx 32rpx;

    .addFoundPo_title {
        text-align: center;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #010101;
        line-height: 44rpx;
        position: relative;

        image {
            width: 44rpx;
            height: 44rpx;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    .addFoundPolist {
        .polist_title {
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            color: #010101;
            line-height: 28rpx;
            margin-bottom: 24rpx;
            margin-top: 48rpx;
        }

        .polist {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;

            .lis {
                width: 216rpx;
                height: 80rpx;
                background: #F5F5F5;
                border-radius: 8rpx 8rpx 8rpx 8rpx;
                text-align: center;
                line-height: 80rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 24rpx;

                image {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 8rpx;
                }

                text {
                    font-size: 28rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    color: #010101;
                }
            }

        }
    }
}
</style>